/* eslint-disable react/jsx-key */
import React, { useState, useEffect } from 'react'
import { WOW } from 'wowjs'
import { withRouter } from "react-router-dom"
import moment from 'moment'
import 'wowjs/css/libs/animate.css'
import '../index.scss'

const formatDate=(date)=> {
  let newDate = moment(date).format('YYYY-MM-DD')
  let arr = newDate.split('-')
  let month = ''
  switch (arr[1]) {
    case '01':
      month = '一月';
      break;
    case '02':
      month = '二月';
      break;
    case '03':
      month = '三月';
      break;
    case '04':
      month = '四月';
      break;
    case '05':
      month = '五月';
      break;
    case '06':
      month = '六月';
      break;
    case '07':
      month = '七月';
      break;
    case '08':
      month = '八月';
      break;
    case '09':
      month = '九月';
      break;
    case '10':
      month = '十月';
      break;
    case '11':
      month = '十一月';
      break;
    case '12':
      month = '十二月';
      break;
    default:
      month = '一月';
  }
  return month + ' ' + arr[2] + ', ' + arr[0]
}
interface IProps{
  articleList: any[];
  history?: any;
}
const ArticleList:React.FC<IProps>=(props)=> {
  const [clientWidth, setClientWidth]:any = useState()
  const [wowNum, setWow] = useState(0)
 
  useEffect(() => {
    if (props.articleList.length && props.articleList.length>wowNum) {
      // 截取数组
      let arr = props.articleList
      arr = arr.slice(wowNum)
      arr.forEach((item, index) => {
        new WOW({
          boxClass: 'wow' + item.id,
          animateClass: 'animated',
          offset: 0,
          mobile: true,
          live: false
        }).init()
      })
      setWow(props.articleList.length)
    }
    setClientWidth(document.body.clientWidth)
  })
  const toDetail=(item:any)=> {
    console.log(props)
    props.history.push({ pathname: '/article/detail/' + item.id, search:'title='+item.title })

  }
  return (
    <>
      {
        props.articleList.map((item:any, index:number) => {
          return (
            <div key={item.id} className={`wow${item.id} slideInLeft animated`} >
              <div className='article-box' data-wow-duration="2s" data-wow-delay="5s">
                <div className='article-content' onClick={() => toDetail(item)} style={{ order: index % 2 === 0 && clientWidth > 1199 ? 1 : -1 }}>
                  <div className='article-time'>
                    {formatDate(item.createTime)}
                  </div>
                  <div className='article-title' >
                    {item.title}
                  </div>
                  <div>
                    {item.descripition}
                  </div>
                </div>
                <div className='article-img' >
                  <img src={item.imgUrl} alt='' />
                </div>
              </div>
            </div>
          )
        })
      }

    </>
  )
}
export default withRouter(ArticleList)
